<template>
  <div class="fzlc">
    <div @click='arrLeft' class="arr arrLeft">
    </div>
    <div class="wrap" id='fzlc-wrap'>
      <ul id='ulList'>
        <li v-for='(item , index) in fzlc' :class='index == (active-1) ?"activeColor":""' :key='index' @click='activeClick(index)'>
          <div class="li-wrap">
            <h2>{{item.time}}</h2>
            <p>{{item.text}}</p>
          </div>
        </li>
        <li>
          <div id='fzlc-line' class="fzlc-line"></div>
        </li>
      </ul>
    </div>
    <div @click='arrRight' class="arr arrRight"></div>
  </div>
</template>
<script>
export default {
  name: 'ToTop',
  data () {
    return {
      fzlc: [
        {
          time: '2017',
          text: '获上海国鸿至臻、深圳誉勤财富战略投资，正式启动IPO进程承办中国气象服务协会年会，发布天气金融解决方案'
        },
        {
          time: '2016',
          text: '获CMMI 3国际认证，软件开发实力获业界认可'
        },
        {
          time: '2015',
          text: '五年预算管理模式探索初现成效，年度销售成交突破亿元大关。'
        },
        {
          time: '2014',
          text: '与19家单位共同发起“中国气象服务协会”，并成为常务理事单位。'
        },
        {
          time: '2013',
          text: '启动“结庐修身 苦练内功”的运营方针，经过3年试运行，正式引入成熟的财务预算量化管理模式。'
        },
        {
          time: '2010',
          text: '昆特智能预警产品受邀参展上海世博会“云中水滴”馆。大规模投身预警发布产品的自主研发，产品体系辐射全国，企业员工数目达到史上峰值。其后三年，几度三番重拾旧山河，企业奄奄一息。'
        },
        {
          time: '2009',
          text: '成为海南省防汛防旱防风指挥部信息化保障指定运行维护单位正式通过国家高新技术企业认证。'
        },
        {
          time: '2006',
          text: '成立于深圳市南山区'
        }
      ],
      arrMarginLeft: 0,
      ulList: '',
      active: 1
    }
  },
  mounted () {
    this.ulList = document.getElementById('ulList')
    document.getElementById('fzlc-line').style.width = this.active * 370 + 'px'
    this.ulList.style.width = this.fzlc.length * 370 + 'px'
  },
  methods: {
    arrLeft () {
      if (this.arrMarginLeft) {
        this.arrMarginLeft += 370
      }
      this.ulList.style.marginLeft = this.arrMarginLeft + 'px'
    },
    arrRight () {
      if (this.arrMarginLeft > -370 * 5) {
        this.arrMarginLeft -= 370
      }
      this.ulList.style.marginLeft = this.arrMarginLeft + 'px'
    },
    activeClick (index) {
      this.active = index + 1
      document.getElementById('fzlc-line').style.width = this.active * 370 + 'px'
    }
  }
}
</script>
<style lang="less" scoped>
.fzlc{
  position: relative;
  .wrap{
    width: 1114px;
    overflow: hidden;
    margin: 0 auto;
    ul{
      position: relative;
      width: 2960px;
      margin-left: 0;
      overflow: hidden;
      transition: 1s;
      li{
        float: left;
        width: 370px;
        cursor: pointer;
        .li-wrap{
          padding-left: 4px;
          h2{
            font-size:28px;
            font-family:PingFang-SC-Heavy;
            font-weight:800;
            font-style:italic;
            color:rgba(121,209,246,1);
            background:rgba(153,153,153,1);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
          }
          p{
            margin-top:60px;
            font-size:12px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
            line-height:30px;
            padding-right: 20px;
          }
        }
        &.activeColor{
          .li-wrap{
            h2{
              background:linear-gradient(11deg,rgba(32,166,196,1) 0%, rgba(98,195,217,1) 100%);
              -webkit-background-clip:text;
              -webkit-text-fill-color:transparent;
            }
          }
        }
        &:last-of-type{
          position: absolute;
          left: 0;
          top: 60px;
          z-index: -1;
          width: 100%;
          height: 6px;
          background: #D3D3D3;
          .fzlc-line{
            position: relative;
            background:linear-gradient(11deg,rgba(32,166,196,1),rgba(98,195,217,1));
            height: 100%;
            width: 100px;
            transition: 1s;
            &:after{
              content: '';
              position: absolute;
              right: 0;
              top: -4px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: #52BCD4;
              border: solid 2px #ffffff;
              box-shadow:0px 1px 9px 1px rgba(43,176,235,0.4);
            }
          }
        }
      }
    }
  }
  .arr{
    position: absolute;
    width: 43px;
    height: 100px;
    background: #ffffff;
    top: 16px;
    cursor: pointer;
    &.arrLeft{
      left: 0;
      background-image: url('../assets/images/left.png');
      background-size: 14px 24px;
      background-repeat: no-repeat;
      background-position: 13px 36px;
      &:hover{
        background-image: url('../assets/images/left_hide.png');
      }
    }
    &.arrRight{
      right: 0;
      background-image: url('../assets/images/right.png');
      background-repeat: no-repeat;
      background-size: 14px 24px;
      background-position: 13px 36px;
      &:hover{
        background-image: url('../assets/images/right_hide.png');
      }
    }
  }
}
</style>
